<template>
  <div>
    <div ref="echarts" style="width: 800px; height: 400px;"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  mounted () {
    this.showLine1()
  },
  methods: {
    showLine1 () {
      const myChart = echarts.init(this.$refs.echarts)
      const option = {
        dataset: {
          source: [
            [100, 'XX', 442, 43.11],
            [300, 'yy', 311, 91.14],
            [500, 'ZZ', 312, 92.12],
          ]
        },
        xAxis: {
          type: 'category',
        },

        yAxis: {
          type: 'value'
        },
        series: [
          // 数据从 dataset 中取，encode 中的数值是 dataset.source 的维度 index （即第几列）
          { type: 'line', encode: { x: 1, y: 0 } },
          { type: 'bar', encode: { x: 1, y: 2 } },
          { type: 'scatter', encode: { x: 1, y: 2 } },
          {
            type: 'pie',
            center: ['50%', '20%'],
            radius: 35,
            label: { show: true },
            encode: { itemName: 1, value: 3 }
          },
        ]
      };
      myChart.setOption(option)
    }
  }
}
</script>
<style lang="scss" scoped></style>
